<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>WebXR Augmented Reality Module - Level 1</title>
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/webxr-ar-module-1/" rel="canonical">
  <link href="favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
  <link href="favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<style>
  .unstable::before {
    content: "This section is not stable";
    display: block;
    font-weight: bold;
    text-align: right;
    color: red;
  }
  .unstable {
    border: thin solid pink;
    border-radius: .5em;
    padding: .5em;
    margin: .5em calc(-0.5em - 1px);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='290'><text transform='rotate(-45)' text-anchor='middle' font-family='sans-serif' font-weight='bold' font-size='70' y='210' opacity='.1'>Unstable</text></svg>");
    background-repeat: repeat;
    background-color: #FFF4F4;
  }
  .unstable h3:first-of-type {
    margin-top: 0.5rem;
  }

  .unstable.example:not(.no-marker)::before {
    content: "Example " counter(example) " (Unstable)";
    float: none;
  }

  .non-normative::before {
    content: "This section is non-normative.";
    font-style: italic;
  }
  .tg {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .tg th {
    border-style: solid;
    border-width: 1px;
    background: #90b8de;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    border-color: grey;
  }
  .tg td {
    padding: 4px 5px;
    background-color: rgb(221, 238, 255);
    font-family: monospace;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    overflow: hidden;
    word-break: normal;
  }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">WebXR Augmented Reality Module - Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://immersive-web.github.io/webxr-ar-module/">https://immersive-web.github.io/webxr-ar-module/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/webxr-ar-module-1/">https://www.w3.org/TR/webxr-ar-module-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2019/WD-webxr-ar-module-1-20191010/" rel="prev">https://www.w3.org/TR/2019/WD-webxr-ar-module-1-20191010/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="87824"><a class="p-name fn u-email email" href="mailto:bajones@google.com">Brandon Jones</a> (<a class="p-org org" href="http://google.com/">Google</a>)
     <dd class="editor p-author h-card vcard" data-editor-id="93109"><a class="p-name fn u-email email" href="mailto:nhw@amazon.com">Nell Waliczek</a> (<a class="p-org org" href="https://amazon.com/">Amazon [Microsoft until 2018]</a>)
     <dd class="editor p-author h-card vcard" data-editor-id="109489"><a class="p-name fn u-email email" href="mailto:manish@mozilla.com">Manish Goregaokar</a> (<a class="p-org org" href="http://mozilla.org/">Mozilla</a>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn"></span>
     <dt>Participate:
     <dd><a href="https://github.com/immersive-web/webxr-ar-module/issues/new">File an issue</a> (<a href="https://github.com/immersive-web/webxr-ar-module/issues">open issues</a>)
     <dd><a href="https://lists.w3.org/Archives/Public/public-immersive-web/">Mailing list archive</a>
     <dd><a href="irc://irc.w3.org:6665/">W3C’s #immersive-web IRC</a>
     <dd>
    </dl>
   </div>
   <div data-fill-with="warning">
    <details class="annoying-warning" open>
     <summary>Unstable API</summary>
     <p><b>The API represented in this document is under development and may change at any time.</b></p>
     <p>For additional context on the use of this API please reference the <a href="https://github.com/immersive-web/webxr-ar-module/blob/master/ar-module-explainer.md">WebXR Augmented Reality Module Explainer</a>.</p>
    </details>
   </div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>The WebXR Augmented Reality module expands the <a href="https://www.w3.org/TR/webxr/">WebXR Device API</a> with the functionality available on AR hardware.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication. Other
    documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this
    technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical
    reports index</a> at http://www.w3.org/TR/.</em> </p>
   <p> This document was published by the <a href="https://www.w3.org/immersive-web/">Immersive Web Working Group</a> as an Editors' Draft. This document is intended to become a W3C Recommendation.

    Feedback and comments on this specification are welcome. Please use <a href="https://github.com/immersive-web/webxr-ar-module/issues">Github issues</a>.
    Discussions may also be found in the <a href="http://lists.w3.org/Archives/Public/public-immersive-web/">public-immersive-web@w3.org archives</a>. </p>
   <p> Publication as an Editors' Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
    be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress. </p>
   <p> This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy/"> <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/109735/status" rel="disclosure">public list of any
    patent disclosures</a> made in connection with the deliverables of the group; that page also
    includes instructions for disclosing a patent. An individual who has actual knowledge of a
    patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
   <p>This WebXR Augmented Reality Module is designed as a module to be implemented in addition to <a href="https://www.w3.org/TR/webxr/">WebXR Device API</a>, and is originally included in WebXR Device API which was divided into core and modules.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#terminology"><span class="secno">1.1</span> <span class="content">Terminology</span></a>
     </ol>
    <li>
     <a href="#webxr-device-api-integration"><span class="secno">2</span> <span class="content">WebXR Device API Integration</span></a>
     <ol class="toc">
      <li><a href="#xrsessionmode-enum"><span class="secno">2.1</span> <span class="content">XRSessionMode</span></a>
      <li><a href="#xrenvironmentblendmode-enum"><span class="secno">2.2</span> <span class="content">XREnvironmentBlendMode</span></a>
      <li><a href="#xr-compositor-behaviors"><span class="secno">2.3</span> <span class="content">XR Compositor Behaviors</span></a>
     </ol>
    <li>
     <a href="#security"><span class="secno">3</span> <span class="content">Security, Privacy, and Comfort Considerations</span></a>
     <ol class="toc">
      <li><a href="#protected-functionality"><span class="secno">3.1</span> <span class="content">Protected functionality</span></a>
     </ol>
    <li><a href="#ack"><span class="secno">4</span> <span class="content">Acknowledgements</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <section class="non-normative">
    <p>Hardware that enables Virtual Reality (VR) and Augmented Reality (AR) applications are now broadly available to consumers, offering an immersive computing platform with both new opportunities and challenges. The ability to interact directly with immersive hardware is critical to ensuring that the web is well equipped to operate as a first-class citizen in this environment. The WebXR Augmented Reality module expands the functionality available to developers when their code is running on AR hardware.</p>
   </section>
   <h3 class="heading settled" data-level="1.1" id="terminology"><span class="secno">1.1. </span><span class="content">Terminology</span><a class="self-link" href="#terminology"></a></h3>
    Augmented Reality describes a class of XR experiences in which virtual content is aligned and composed with the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="real-world-environment">real-world environment</dfn> before being displayed to users. 
   <p>XR hardware can be divided into categories based on <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="display-technology">display technology</dfn>.</p>
   <ul>
    <li data-md>
     <p>Devices described as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="additive-light">additive light</dfn>, also known as see-through, use transparent optical displays to present virtual content. On these devices, the user may always be able to see through to the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment">real-world environment</a> regardless of developer requests during session creation.</p>
    <li data-md>
     <p>Devices described as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pass-through">pass-through</dfn> use an opaque display to combine virtual content with a camera stream of the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment①">real-world environment</a>. On these devices, the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment②">real-world environment</a> will only be visible when the developer has made an explicit request for it during session creation.</p>
    <li data-md>
     <p>Devices described as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="opaque">opaque</dfn> fully obscure the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment③">real-world environment</a> and do not provide a way to view the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment④">real-world environment</a>.</p>
   </ul>
   <h2 class="heading settled" data-level="2" id="webxr-device-api-integration"><span class="secno">2. </span><span class="content">WebXR Device API Integration</span><a class="self-link" href="#webxr-device-api-integration"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="xrsessionmode-enum"><span class="secno">2.1. </span><span class="content">XRSessionMode</span><a class="self-link" href="#xrsessionmode-enum"></a></h3>
   <p>As defined in the <a href="https://www.w3.org/TR/webxr/">WebXR Device API</a> categorizes <code class="idl"><a data-link-type="idl">XRSession</a></code>s based on their <code class="idl"><a data-link-type="idl">XRSessionMode</a></code>.  This module enables use of the <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar">"immersive-ar"</a></code> <code class="idl"><a data-link-type="idl">XRSessionMode</a></code> enum.</p>
   <p>A session mode of <dfn class="dfn-paneled idl-code" data-dfn-for="XRSessionMode" data-dfn-type="enum-value" data-export id="dom-xrsessionmode-immersive-ar"><code>"immersive-ar"</code></dfn> indicates that the session’s output will be given <a data-link-type="dfn">exclusive access</a> to the <a data-link-type="dfn">immersive XR device</a> display and that content <b>is</b> intended to be <a data-link-type="dfn" href="#blend-technique" id="ref-for-blend-technique">blended</a> with the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment⑤">real-world environment</a>.</p>
   <p>On compatible hardware, user agents MAY support <code class="idl"><a data-link-type="idl">"immersive-vr"</a></code> sessions, <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar①">"immersive-ar"</a></code> sessions, or both. Supporting the additional <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar②">"immersive-ar"</a></code> session mode, does not change the requirement that user agents MUST support <code class="idl"><a data-link-type="idl">"inline"</a></code> sessions.</p>
   <p class="note" role="note"><span>NOTE:</span> This means that <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar③">"immersive-ar"</a></code> sessions support all the features and reference spaces that <code class="idl"><a data-link-type="idl">"immersive-vr"</a></code> sessions do, since both are <a data-link-type="dfn">immersive sessions</a>.</p>
   <div class="example" id="example-080291e0">
    <a class="self-link" href="#example-080291e0"></a> The following code checks to see if <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar④">"immersive-ar"</a></code> sessions are supported. 
<pre class="highlight">navigator<c- p>.</c->xr<c- p>.</c->supportsSession<c- p>(</c-><c- t>'immersive-ar'</c-><c- p>).</c->then<c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  <c- c1>// 'immersive-ar' sessions are supported.</c->
  <c- c1>// Page should advertise AR support to the user.</c->
<c- p>}</c->
</pre>
   </div>
   <div class="example" id="example-eded3767">
    <a class="self-link" href="#example-eded3767"></a> The following code attempts to retrieve an <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar⑤">"immersive-ar"</a></code> <code class="idl"><a data-link-type="idl">XRSession</a></code>. 
<pre class="highlight"><c- a>let</c-> xrSession<c- p>;</c->

navigator<c- p>.</c->xr<c- p>.</c->requestSession<c- p>(</c-><c- u>"immersive-ar"</c-><c- p>).</c->then<c- p>((</c->session<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  xrSession <c- o>=</c-> session<c- p>;</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.2" id="xrenvironmentblendmode-enum"><span class="secno">2.2. </span><span class="content">XREnvironmentBlendMode</span><a class="self-link" href="#xrenvironmentblendmode-enum"></a></h3>
    When drawing XR content, it is often useful to understand how the rendered pixels will be blended by the <a data-link-type="dfn">XR Compositor</a> with the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment⑥">real-world environment</a>. 
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-xrenvironmentblendmode"><code><c- g>XREnvironmentBlendMode</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-opaque" id="ref-for-dom-xrenvironmentblendmode-opaque"><c- s>"opaque"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-alpha-blend" id="ref-for-dom-xrenvironmentblendmode-alpha-blend"><c- s>"alpha-blend"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-additive" id="ref-for-dom-xrenvironmentblendmode-additive"><c- s>"additive"</c-></a>
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>XRSession</c-></a> {
  // Attributes
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-xrenvironmentblendmode" id="ref-for-enumdef-xrenvironmentblendmode"><c- n>XREnvironmentBlendMode</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="XREnvironmentBlendMode" href="#dom-xrsession-environmentblendmode" id="ref-for-dom-xrsession-environmentblendmode"><c- g>environmentBlendMode</c-></a>;
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="XRSession" data-dfn-type="attribute" data-export id="dom-xrsession-environmentblendmode"><code>environmentBlendMode</code></dfn> attribute MUST report the <code class="idl"><a data-link-type="idl" href="#enumdef-xrenvironmentblendmode" id="ref-for-enumdef-xrenvironmentblendmode①">XREnvironmentBlendMode</a></code> value that matches <a data-link-type="dfn" href="#blend-technique" id="ref-for-blend-technique①">blend technique</a> currently being performed by the <a data-link-type="dfn">XR Compositor</a>.</p>
   <ul>
    <li data-md>
     <p>A blend mode of <dfn class="dfn-paneled idl-code" data-dfn-for="XREnvironmentBlendMode" data-dfn-type="enum-value" data-export data-lt="&quot;opaque&quot;|opaque" id="dom-xrenvironmentblendmode-opaque"><code>opaque</code></dfn> MUST be reported if the <a data-link-type="dfn">XR Compositor</a> is using <a data-link-type="dfn" href="#opaque-environment-blending" id="ref-for-opaque-environment-blending">opaque environment blending</a>.</p>
    <li data-md>
     <p>A blend mode of <dfn class="dfn-paneled idl-code" data-dfn-for="XREnvironmentBlendMode" data-dfn-type="enum-value" data-export data-lt="&quot;alpha-blend&quot;|alpha-blend" id="dom-xrenvironmentblendmode-alpha-blend"><code>alpha-blend</code></dfn> MUST be reported if the <a data-link-type="dfn">XR Compositor</a> is using <a data-link-type="dfn" href="#alpha-blend-environment-blending" id="ref-for-alpha-blend-environment-blending">alpha-blend environment blending</a>.</p>
    <li data-md>
     <p>A blend mode of <dfn class="dfn-paneled idl-code" data-dfn-for="XREnvironmentBlendMode" data-dfn-type="enum-value" data-export data-lt="&quot;additive&quot;|additive" id="dom-xrenvironmentblendmode-additive"><code>additive</code></dfn> MUST be reported if the <a data-link-type="dfn">XR Compositor</a> is using <a data-link-type="dfn" href="#additive-environment-blending" id="ref-for-additive-environment-blending">additive environment blending</a>.</p>
   </ul>
   <h3 class="heading settled" data-level="2.3" id="xr-compositor-behaviors"><span class="secno">2.3. </span><span class="content">XR Compositor Behaviors</span><a class="self-link" href="#xr-compositor-behaviors"></a></h3>
   <p>When presenting content to the <a data-link-type="dfn">XR device</a>, the <a data-link-type="dfn">XR Compositor</a> MUST apply the appropriate <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="blend-technique">blend technique</dfn> to combine virtual pixels with the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment⑦">real-world environment</a>. The appropriate technique is determined based on the <a data-link-type="dfn">XR device</a>'s <a data-link-type="dfn" href="#display-technology" id="ref-for-display-technology">display technology</a> and the <a data-link-type="dfn">mode</a>.</p>
   <ul>
    <li data-md>
     <p>When performing <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="opaque-environment-blending">opaque environment blending</dfn>, the rendered buffers obtained by the <a data-link-type="dfn">XR Compositor</a> are composited using <a data-link-type="dfn" href="https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_srcover" id="ref-for-porterduffcompositingoperators_srcover">source-over</a> blending on top of buffers containing exclusively 100% opaque black pixels. The composited output is then presented on the <a data-link-type="dfn">XR device</a>. This technique MUST be applied on <a data-link-type="dfn" href="#opaque" id="ref-for-opaque">opaque</a> and <a data-link-type="dfn" href="#pass-through" id="ref-for-pass-through">pass-through</a> displays when the <a data-link-type="dfn">mode</a> is set to either <code class="idl"><a data-link-type="idl">"immersive-vr"</a></code> or <code class="idl"><a data-link-type="idl">"inline"</a></code>. This technique MUST NOT be applied when the <a data-link-type="dfn">mode</a> is set to <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar⑥">"immersive-ar"</a></code>, regardless of the <a data-link-type="dfn">XR Device</a>'s <a data-link-type="dfn" href="#display-technology" id="ref-for-display-technology①">display technology</a>.</p>
    <li data-md>
     <p>When performing <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="alpha-blend-environment-blending">alpha-blend environment blending</dfn>, the rendered buffers obtained by the <a data-link-type="dfn">XR Compositor</a> are composited using <a data-link-type="dfn" href="https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_srcover" id="ref-for-porterduffcompositingoperators_srcover①">source-over</a> blending on top of buffers containing pixel representations of the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment⑧">real-world environment</a>. These pixel representations must be aligned on each <code class="idl"><a data-link-type="idl">XRFrame</a></code> to the <code class="idl"><a data-link-type="idl">transform</a></code> of each view in <code class="idl"><a data-link-type="idl">views</a></code>. The composited output is then presented on the <a data-link-type="dfn">XR device</a>. This technique MUST be applied on <a data-link-type="dfn" href="#pass-through" id="ref-for-pass-through①">pass-through</a> displays when the <a data-link-type="dfn">mode</a> is set <code class="idl"><a data-link-type="idl" href="#dom-xrsessionmode-immersive-ar" id="ref-for-dom-xrsessionmode-immersive-ar⑦">"immersive-ar"</a></code>. This technique MUST NOT be applied when the <a data-link-type="dfn">mode</a> is set to <code class="idl"><a data-link-type="idl">"immersive-vr"</a></code> or <code class="idl"><a data-link-type="idl">"inline"</a></code> regardless of the <a data-link-type="dfn">XR Device</a>'s <a data-link-type="dfn" href="#display-technology" id="ref-for-display-technology②">display technology</a>.</p>
    <li data-md>
     <p>When performing <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="additive-environment-blending">additive environment blending</dfn>, the rendered buffers obtained by the <a data-link-type="dfn">XR Compositor</a> are composited using <a data-link-type="dfn" href="https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_plus" id="ref-for-porterduffcompositingoperators_plus">lighter</a> blending before being presented on the <a data-link-type="dfn">XR device</a>. This technique MUST be applied on <a data-link-type="dfn" href="#additive-light" id="ref-for-additive-light">additive light</a> displays, regardless of the <a data-link-type="dfn">mode</a>.</p>
   </ul>
   <p class="note" role="note"><span>NOTE:</span> When using a device that performs <a data-link-type="dfn" href="#alpha-blend-environment-blending" id="ref-for-alpha-blend-environment-blending①">alpha-blend environment blending</a>, use of a <code class="idl"><a data-link-type="idl">baseLayer</a></code> with no alpha channel will result in the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment⑨">real-world environment</a> being completely obscured. It should be assumed that this is intentional on the part of developer, and the user agent may wish to suspend compositing of <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment①⓪">real-world environment</a> as an optimization in such cases.</p>
   <p>The <a data-link-type="dfn">XR Compositor</a> MAY make additional color or pixel adjustments to optimize the experience. The timing of composition MUST NOT depend on the <a data-link-type="dfn" href="#blend-technique" id="ref-for-blend-technique②">blend technique</a> or source of the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment①①">real-world environment</a>. but MUST NOT perform occlusion based on pixel depth relative to real-world geometry; only rendered content MUST be composed on top of the real-world background.</p>
   <p class="note" role="note"><span>NOTE:</span> Future modules may enable automatic or manual pixel occlusion with the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment①②">real-world environment</a>.</p>
   <p>The <a data-link-type="dfn">XR Compositor</a> MUST NOT automatically grant the page access to any additional information such as camera intrinsics, media streams, real-world geometry, etc.</p>
   <p class="note" role="note"><span>NOTE:</span> Developers may request access to an <a data-link-type="dfn">XR Device</a>'s camera, should one be exposed through the existing [Media Capture and Streams](https://www.w3.org/TR/mediacapture-streams/) specification. However, doing so does not provide a mechanism to query the <code class="idl"><a data-link-type="idl">XRRigidTransform</a></code> between the camera’s location and the <a data-link-type="dfn">native origin</a> of the <a data-link-type="dfn">viewer reference space</a>. It also does not provide a guaranteed way to determine the camera intrinsics necessary to match the view of the <a data-link-type="dfn" href="#real-world-environment" id="ref-for-real-world-environment①③">real-world environment</a>. As such, performing effective computer vision algorithms wil be significantly hampered. Future modules or specifications may enable such functionality.</p>
   <h2 class="heading settled" data-level="3" id="security"><span class="secno">3. </span><span class="content">Security, Privacy, and Comfort Considerations</span><a class="self-link" href="#security"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="protected-functionality"><span class="secno">3.1. </span><span class="content">Protected functionality</span><a class="self-link" href="#protected-functionality"></a></h3>
   <p class="issue" id="issue-6ece0a93"><a class="self-link" href="#issue-6ece0a93"></a> add information about new threats and mitigations introduced by functionality in this module</p>
   <h2 class="heading settled" data-level="4" id="ack"><span class="secno">4. </span><span class="content">Acknowledgements</span><a class="self-link" href="#ack"></a></h2>
   <p>The following individuals have contributed to the design of the WebXR Device API specification:</p>
   <ul>
    <li data-md>
     <p><a href="mailto:cvan@mozilla.com">Chris Van Wiemeersch</a> (<a href="https://mozilla.org/">Mozilla</a>)</p>
    <li data-md>
     <p><a href="mailto:kgilbert@mozilla.com">Kearwood Gilbert</a> (<a href="https://mozilla.org/">Mozilla</a>)</p>
    <li data-md>
     <p><a href="mailto:rafael.cintron@microsoft.com">Rafael Cintron</a> (<a href="https://microsoft.com/">Microsoft</a>)</p>
    <li data-md>
     <p><a href="mailto:sebastian.sylvan@gmail.com">Sebastian Sylvan</a> (Formerly <a href="https://microsoft.com/">Microsoft</a>)</p>
   </ul>
   <p>And a special thanks to <a href="mailto:vladv@unity3d.com">Vladimir Vukicevic</a> (<a href="https://unity3d.com/">Unity</a>) for kick-starting this whole adventure!</p>
   <p id="back-to-top" role="navigation"><a href="#toc"><abbr title="Back to Top">↑</abbr></a></p>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-xrenvironmentblendmode-additive">additive</a><span>, in §2.2</span>
   <li><a href="#dom-xrenvironmentblendmode-additive">"additive"</a><span>, in §2.2</span>
   <li><a href="#additive-environment-blending">additive environment blending</a><span>, in §2.3</span>
   <li><a href="#additive-light">additive light</a><span>, in §1.1</span>
   <li><a href="#dom-xrenvironmentblendmode-alpha-blend">alpha-blend</a><span>, in §2.2</span>
   <li><a href="#dom-xrenvironmentblendmode-alpha-blend">"alpha-blend"</a><span>, in §2.2</span>
   <li><a href="#alpha-blend-environment-blending">alpha-blend environment blending</a><span>, in §2.3</span>
   <li><a href="#blend-technique">blend technique</a><span>, in §2.3</span>
   <li><a href="#display-technology">display technology</a><span>, in §1.1</span>
   <li><a href="#dom-xrsession-environmentblendmode">environmentBlendMode</a><span>, in §2.2</span>
   <li><a href="#dom-xrsessionmode-immersive-ar">"immersive-ar"</a><span>, in §2.1</span>
   <li>
    opaque
    <ul>
     <li><a href="#opaque">definition of</a><span>, in §1.1</span>
     <li><a href="#dom-xrenvironmentblendmode-opaque">enum-value for XREnvironmentBlendMode</a><span>, in §2.2</span>
    </ul>
   <li><a href="#dom-xrenvironmentblendmode-opaque">"opaque"</a><span>, in §2.2</span>
   <li><a href="#opaque-environment-blending">opaque environment blending</a><span>, in §2.3</span>
   <li><a href="#pass-through">pass-through</a><span>, in §1.1</span>
   <li><a href="#real-world-environment">real-world environment</a><span>, in §1.1</span>
   <li><a href="#enumdef-xrenvironmentblendmode">XREnvironmentBlendMode</a><span>, in §2.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-porterduffcompositingoperators_plus">
   <a href="https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_plus">https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-porterduffcompositingoperators_plus">2.3. XR Compositor Behaviors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-porterduffcompositingoperators_srcover">
   <a href="https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_srcover">https://www.w3.org/TR/compositing-1#porterduffcompositingoperators_srcover</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-porterduffcompositingoperators_srcover">2.3. XR Compositor Behaviors</a> <a href="#ref-for-porterduffcompositingoperators_srcover①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[compositing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-porterduffcompositingoperators_plus" style="color:initial">lighter</span>
     <li><span class="dfn-paneled" id="term-for-porterduffcompositingoperators_srcover" style="color:initial">source-over</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-compositing-1">[COMPOSITING-1]
   <dd>Rik Cabanier; Nikos Andronikos. <a href="https://www.w3.org/TR/compositing-1/">Compositing and Blending Level 1</a>. 13 January 2015. CR. URL: <a href="https://www.w3.org/TR/compositing-1/">https://www.w3.org/TR/compositing-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>enum</c-> <a href="#enumdef-xrenvironmentblendmode"><code><c- g>XREnvironmentBlendMode</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-opaque" id="ref-for-dom-xrenvironmentblendmode-opaque①"><c- s>"opaque"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-alpha-blend" id="ref-for-dom-xrenvironmentblendmode-alpha-blend①"><c- s>"alpha-blend"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrenvironmentblendmode-additive" id="ref-for-dom-xrenvironmentblendmode-additive①"><c- s>"additive"</c-></a>
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>XRSession</c-></a> {
  // Attributes
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-xrenvironmentblendmode" id="ref-for-enumdef-xrenvironmentblendmode②"><c- n>XREnvironmentBlendMode</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="XREnvironmentBlendMode" href="#dom-xrsession-environmentblendmode" id="ref-for-dom-xrsession-environmentblendmode①"><c- g>environmentBlendMode</c-></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> add information about new threats and mitigations introduced by functionality in this module<a href="#issue-6ece0a93"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="real-world-environment">
   <b><a href="#real-world-environment">#real-world-environment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-real-world-environment">1.1. Terminology</a> <a href="#ref-for-real-world-environment①">(2)</a> <a href="#ref-for-real-world-environment②">(3)</a> <a href="#ref-for-real-world-environment③">(4)</a> <a href="#ref-for-real-world-environment④">(5)</a>
    <li><a href="#ref-for-real-world-environment⑤">2.1. XRSessionMode</a>
    <li><a href="#ref-for-real-world-environment⑥">2.2. XREnvironmentBlendMode</a>
    <li><a href="#ref-for-real-world-environment⑦">2.3. XR Compositor Behaviors</a> <a href="#ref-for-real-world-environment⑧">(2)</a> <a href="#ref-for-real-world-environment⑨">(3)</a> <a href="#ref-for-real-world-environment①⓪">(4)</a> <a href="#ref-for-real-world-environment①①">(5)</a> <a href="#ref-for-real-world-environment①②">(6)</a> <a href="#ref-for-real-world-environment①③">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="display-technology">
   <b><a href="#display-technology">#display-technology</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-display-technology">2.3. XR Compositor Behaviors</a> <a href="#ref-for-display-technology①">(2)</a> <a href="#ref-for-display-technology②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="additive-light">
   <b><a href="#additive-light">#additive-light</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-additive-light">2.3. XR Compositor Behaviors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pass-through">
   <b><a href="#pass-through">#pass-through</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pass-through">2.3. XR Compositor Behaviors</a> <a href="#ref-for-pass-through①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="opaque">
   <b><a href="#opaque">#opaque</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-opaque">2.3. XR Compositor Behaviors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrsessionmode-immersive-ar">
   <b><a href="#dom-xrsessionmode-immersive-ar">#dom-xrsessionmode-immersive-ar</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrsessionmode-immersive-ar">2.1. XRSessionMode</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar①">(2)</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar②">(3)</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar③">(4)</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar④">(5)</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar⑤">(6)</a>
    <li><a href="#ref-for-dom-xrsessionmode-immersive-ar⑥">2.3. XR Compositor Behaviors</a> <a href="#ref-for-dom-xrsessionmode-immersive-ar⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-xrenvironmentblendmode">
   <b><a href="#enumdef-xrenvironmentblendmode">#enumdef-xrenvironmentblendmode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-xrenvironmentblendmode">2.2. XREnvironmentBlendMode</a> <a href="#ref-for-enumdef-xrenvironmentblendmode①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrsession-environmentblendmode">
   <b><a href="#dom-xrsession-environmentblendmode">#dom-xrsession-environmentblendmode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrsession-environmentblendmode">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrenvironmentblendmode-opaque">
   <b><a href="#dom-xrenvironmentblendmode-opaque">#dom-xrenvironmentblendmode-opaque</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrenvironmentblendmode-opaque">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrenvironmentblendmode-alpha-blend">
   <b><a href="#dom-xrenvironmentblendmode-alpha-blend">#dom-xrenvironmentblendmode-alpha-blend</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrenvironmentblendmode-alpha-blend">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrenvironmentblendmode-additive">
   <b><a href="#dom-xrenvironmentblendmode-additive">#dom-xrenvironmentblendmode-additive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrenvironmentblendmode-additive">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="blend-technique">
   <b><a href="#blend-technique">#blend-technique</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blend-technique">2.1. XRSessionMode</a>
    <li><a href="#ref-for-blend-technique①">2.2. XREnvironmentBlendMode</a>
    <li><a href="#ref-for-blend-technique②">2.3. XR Compositor Behaviors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="opaque-environment-blending">
   <b><a href="#opaque-environment-blending">#opaque-environment-blending</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-opaque-environment-blending">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alpha-blend-environment-blending">
   <b><a href="#alpha-blend-environment-blending">#alpha-blend-environment-blending</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alpha-blend-environment-blending">2.2. XREnvironmentBlendMode</a>
    <li><a href="#ref-for-alpha-blend-environment-blending①">2.3. XR Compositor Behaviors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="additive-environment-blending">
   <b><a href="#additive-environment-blending">#additive-environment-blending</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-additive-environment-blending">2.2. XREnvironmentBlendMode</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>